<template>
	<view class="container">
		<div class="ibox theme c">{{ obj.name }}</div>
		<div>
			<div :class="['ibox', 'tt' + idx]" v-for="(i, idx) in list" :key="i">
				<div class="theme mb10">{{ i.name }}</div>
				<div v-for="i2 in i.child" :key="i2.id">
					<div class="f12">
						<uni-icons style="vertical-align: middle; margin-right: 5rpx;" type="notification" color="#808080"
							size="14"></uni-icons>
						{{ i2.type }}
					</div>
					<div class="c80 mtb10 flex ac" style="margin-left: 20rpx;">
						<span style="display: inline-block; min-width: 4rem;">{{ i2.tag }}</span>
						<span v-if="i2.type == '门店概览'" style="color: #333; margin-left: 20px;" @click="callpp(i2.value)">
							<uni-icons type="phone-filled" color="#2755CB"
							size="20"></uni-icons>
						</span>
						<span v-else style="color: #333;">{{ i2.value || '' }}</span>

					</div>
				</div>
			</div>
			<div class="ibox tt4">
				<div class="theme mb10">其他服务</div>
				<div class="c80" style="padding-left: 20rpx;">运动设施</div>
				<div class="c80" style="padding-left: 20rpx;">以上信息均为参考，实际以球馆提供为准</div>
			</div>
			<div class="ibox tt5">
				<div class="theme mb10">咨询客服</div>
				<div class="c80" style="padding-left: 20rpx;">客服电话:（13330075971）
				</div>
			</div>
		</div>

	</view>
</template>

<script>
export default {
	data() {
		return {
			obj: { name: '', tagArr: [] },
			page: 1,
			tags: ['基础信息', '场馆服务']
		}
	},
	onLoad(p) {
		let { name, tagArr } = p;
		this.obj = { name, tagArr: JSON.parse(tagArr) };
	},
	computed: {
		list() {
			let arr = this.obj.tagArr;
			return this.tags.map(i => {
				let ar = arr && arr?.filter(i2 => i2.groupName == i) || [];
				return {
					name: i,
					child: ar,
				}
			})
		}
	},
	methods: {
		callpp(v) {
			uni.makePhoneCall({
				phoneNumber: v,
			});
		}

	}
}
</script>

<style lang="scss">
.tt0 {
	background: linear-gradient(180deg, #FFFFFF 0%, #EAF6FD 100%);
}

.tt1 {
	background: linear-gradient(180deg, #FFFFFF 0%, #EBF5EC 100%);
}

.tt4 {
	background: linear-gradient(180deg, #FFFFFF 0%, #FEF1E6 100%);
}

.tt5 {
	background: linear-gradient(180deg, #FFFFFF 0%, #E9EAF5 100%);
}
</style>